<template>
  <div>
    <!-- <el-button>添加</el-button> -->
    <!-- 所有罚单 -->
    <el-table
      :data="DriveCard"
      style="width: 100%"
      :default-sort="{ prop: 'date' }"
    >
<!--      <el-table-column label="序号" type="index" prop="index" sortable>
        <template slot-scope="scope">
          <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column> -->
			<el-table-column label="驾驶证号">
			  <template slot-scope="scope">
			    <span style="margin-left: 10px">{{ scope.row.driveCardId }}</span>
			  </template>
			</el-table-column>
      <el-table-column label="身份证号">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.cardId }}</span>
        </template>
      </el-table-column>

     <el-table-column label="国籍" style="width: 10px;">
        <template slot-scope="scope">
          <span style="margin-left: 10px;width: 10px;">{{ scope.row.nationality }}</span>
        </template>
      </el-table-column>
      <el-table-column label="领证日期">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="准驾车型">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.clazz }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效日期至" prop="date" sortable>
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.validPeriod }}</span>
        </template>
      </el-table-column>
	  <el-table-column label="签发部门">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.department }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="当前分数">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.score }}</span>
	    </template>
	  </el-table-column>
	  <el-table-column label="驾照状态">
	    <template slot-scope="scope">
	      <span style="margin-left: 10px">{{ scope.row.state }}</span>
	    </template>
	  </el-table-column>
<!--      <el-table-column label="操作">
        <template slot-scope="scope">
          <span style="margin-left: 10px" @click="update(scope.row)">修改</span>
          <span style="margin-left: 10px" @click="backout(scope.row)">注销</span>
        </template>
      </el-table-column> -->
<!--      <el-table-column label="创建时间" prop="date" sortable>
        <template slot-scope="scope">
          <span>{{ formatTimer(scope.row.createTime) }}</span>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      :spam="20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[3, 5, 10, 50]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>
<script>
import Url from "@/util/URLUtil";
export default {
  name: "AllDriverCard",
  data() {
    return {
      DriveCard: [],
      page: {
        current: 1, //当前页
        size: 5, //每页数据条数
        pages: 0, //总页数
        total: 0, //总数据条数
      },
    };
  },
  methods: {
    //初始化表格数据
    initAllTicketTable() {
      var self = this;
      $.ajax({
        url: Url.url + "/api/getAllDriveCard",
        type: "get",
        contentType: "application/json",
        // dataType: "json",
        data: { current: self.page.current, size: self.page.size },
        success(response) {
          // console.log(response);
          self.DriveCard = response.records;
          self.page.total = response.total;
          self.page.size = response.size;
          self.page.current = response.current;
          self.page.pages = response.pages;
        },
      });
    },
    //修改驾驶证
    update(row){
       this.$confirm("确认处理:"+row.carNo+"号罚单；")
    },
    //撤销罚单
    backout(row){
      this.$confirm("确认撤销:"+row.carNo+"号罚单；")
    },
    //修改每页尺寸
    handleSizeChange(val) {
      this.page.size = val;
      this.page.current = 1;
      this.initAllTicketTable();
    },
    //修改当前页
    handleCurrentChange(val) {
      this.page.current = val;
      this.initAllTicketTable();
    },
    //日期格式化工具
    formatTimer(value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  mounted() {
    this.initAllTicketTable();
  },
};
</script>
